<template>
  <view class="assetTransfer">
    <u-sticky>
      <view class="tabbar">
        <view class="nav">
          <u-search @change="change" placeholder="请输入资产名称" v-model="model.input" bgColor="#fff" :showAction="false">
          </u-search>
        </view>
        <u-subsection style="position: relative;z-index: 999;" :list="list" :current="curNow" @change="sectionChange">
        </u-subsection>
      </view>
    </u-sticky>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :sticky="true"
      :up="upOption">
      <view class="list">

        <checkbox-group @change="checkboxChange">
          <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in range" :key="index">
            <view class="list-item">
              <view v-if="curNow == 0">
                <checkbox :value="item.objectID" :checked="item.checked" color="#0d6fb8" />
              </view>
              <view class="list-item-left">
                <u-icon name="play-right-fill" color="#0d6fb8"></u-icon>
              </view>
              <view class="list-item-right">

                <view class="name">资产名称：{{ item.assetsName }}({{ item.assetsNo }})</view>
                <view>
                  <text>申请人：{{ item.creatUserName }}</text>
                  <text>,</text>
                  <text>原使用人：{{ item.oldUser }}</text>

                </view>
                <view>
                  <text>被转移人：{{ item.divertUserName }}</text>
                </view>
                <view v-if="item.deposit">
                  <text>存放地：{{ item.deposit }}</text>
                </view>
                <view>申请时间：{{ item.createTime }}</view>
              </view>
              <view :class="item.state != '已完成' ? 'state' : 'stateTwo'">{{ item.state }}</view>
              <view class="foor">

                <view class="BtnTwo" @click="detail(item)">查看详情</view>
              </view>
            </view>

          </label>
        </checkbox-group>

      </view>
      <u-action-sheet :actions="sheetList" :title="title" :show="sheetShow" :closeOnClickOverlay="true"
        @close="sheetShow = false" :closeOnClickAction="true" cancelText="取消"></u-action-sheet>


    </mescroll-body>
    <tab-bar :currentPage="3"></tab-bar>

    <!-- 定位 -->
    <view v-if="curNow == 0" @click="Batch('审批')" class="BtnBatch">批量<br />审批</view>

    <!-- 批量审批 -->
    <u-popup :show="isFlag" mode="bottom" closeable="true" @close="isFlag = false">
      <view style="padding: 15px 10px">
        <u-form labelPosition="left" :model="model">

          <u-form-item v-if="columns.length > 0" prop="model.exUserName" borderBottom ref="item1" @click="show = true">
            <u--input v-model="model.exUserName" disabled disabledColor="#ffffff" placeholder="请选择审批人" border="none">
            </u--input>
          </u-form-item>
          <!-- 审批意见 -->
          <u-form-item>
            <u-textarea v-model="model.remark" placeholder="请输入审批意见"></u-textarea>
          </u-form-item>

          <u-form-item>
            <view class="foor">
              <u-button size="large" type="primary" text="确认" @click="DoEx"></u-button>
            </view>
          </u-form-item>
        </u-form>
      </view>

    </u-popup>
    <!-- 审批人 -->
    <u-picker @confirm="confirm" @cancel="show = false" :show="show" :columns="columns" keyName="label">
    </u-picker>
  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      list: ['我的审批', '审批记录', '转入资产', '转出资产'],
      // 或者如下，也可以配置keyName参数修改对象键名
      curNow: 0,
      value: 0,
      range: [], //数据
      upOption: {
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
          time: null, // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
        },
        noMoreSize: 1, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        textNoMore: '-- 无更多数据 --', // 没有更多数据的提示文本
      },
      model: {
        pageIndex: 1,
        pageSize: 10,
        type: 5,
        input: ''
      },
      objectIDS: [],
      isFlag: false,
      model: {
        objectID: [],
        button: "",
        remark: "",
        exUser: "",
        exUserName: ""
      },
      columns: [],
      show: false

    }
  },

  methods: {

    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.model.type = this.curNow == 0 ? 5 : this.curNow == 1 ? 6 : this.curNow == 2 ? 3 : 2
      this.model.pageIndex = page.num
      this.model.pageSize = page.size
      this.$u.api.GetList(this.model).then(res => {
        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        this.mescroll.endBySize(res.data.length, res.count); //必传参数(当前页的数据个数, 总数据量)
        //设置列表数据
        if (this.model.pageIndex == 1) this.range = []; //如果是第一页需手动制空列表
        this.range = this.range.concat(res.data); //追加新数据

      }).catch(() => {
        //联网失败, 结束加载
        this.mescroll.endErr();
      })
    },
    sectionChange(index) {
      this.curNow = index;
      this.range = []
      this.mescroll.resetUpScroll();
      this.objectIDS = []
    },
    // 搜索
    change(e) {
      this.model.input = e
      this.range = []
      this.mescroll.resetUpScroll();
    },
    checkboxChange: function (e) {

      var items = this.range
      this.objectIDS = e.detail.value;
      console.log(this.objectIDS, 'this.objectIDS1')

      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i]
        if (this.objectIDS.includes(item.objectID)) {
          this.$set(item, 'checked', true)
        } else {
          this.$set(item, 'checked', false)
        }
      }
    },
    // 跳转详情
    detail(item) {

      uni.navigateTo({
        url: "/pages/assetTransfer/detail?objectID=" + item.objectID
      });


    },
    // 批量获取审批人
    GetExUser() {
      this.$u.api.GetBatchExUser(JSON.stringify(this.objectIDS)).then((res) => {

        const data = res.data.map((x) => {
          return {
            phone: x.phone,
            remarks: x.remarks,
            state: x.state,
            userID: x.userID,
            label: x.userName
          }
        })
        this.columns = [data]
        if (res.flag) {
          this.isFlag = true
        }
      })
    },
    // 选人
    confirm(e) {
      this.model.exUserName = e.value[0].label
      this.model.exUser = e.value[0].userID
      this.show = false
    },
    // 批量操作
    Batch(name) {
      if (this.objectIDS.length === 0) return this.$u.toast('请选择资产')
      // 选人接口
      this.GetExUser()
      this.model = {
        button: name,
      }
    },
    // 确定
    DoEx() {
      if (this.columns.length > 0 && !this.model.exUserName) return this.$u.toast('请选择审批人');
      if (!this.model.remark) return this.$u.toast('请输入备注');
      const data = {
        objectIDS: this.objectIDS,
        button: this.model.button,
        remark: this.model.remark,
        exUser: this.model.exUser,
        exUserName: this.model.exUserName

      }
      this.$u.api.BatchEx(data).then((res) => {
        this.$u.toast('提交成功');
        this.range = []
        this.mescroll.resetUpScroll();
        this.show = false
        this.isFlag = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.assetTransfer {
  position: relative;

  // 定位
  .BtnBatch {
    position: fixed;
    background-color: rgb(25, 137, 250);
    bottom: 65px;
    right: 10px;
    padding: 10px 15px;
    color: white;
    border-radius: 50%;
    border: 1px solid #ccc;
  }

  .tabbar {
    position: sticky;
    top: var(--window-top);
    background-color: #fff;
    z-index: 999;
  }

  .nav {
    padding: 10px;
  }

  .list {
    .list-item {

      display: flex;
      align-items: center;
      position: relative;
      margin: 20upx auto;
      padding: 16upx;
      background: #ffffff;

      // 取消订单
      .foor {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .BtnTwo {
          width: 130upx;
          height: 40upx;
          background-color: #f5f5f5;
          border-radius: 24upx;
          border: solid 1upx #dddddd;
          font-size: 24upx;
          line-height: 40upx;
          text-align: center;
          color: #3478f3;
          position: absolute;
          bottom: 5px;
          right: 20px;
        }
      }

      .list-item-left {
        margin-right: 20rpx;
        display: flex;
      }

      .list-item-right {
        view {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #999999;
        }

        .no {
          font-size: 24rpx;
          line-height: 36rpx;
          color: #999999;
        }

        .name {
          font-size: 30rpx;
          color: #333333;
        }
      }

      .state {
        position: absolute;
        top: 10upx;
        right: 10upx;
        color: #e7605d;
        font-size: 26rpx;
      }

      .stateTwo {
        position: absolute;
        top: 10upx;
        right: 10upx;
        color: #42ae4b;
        font-size: 26rpx;
      }
    }
  }
}
</style>
